<template>
  <div id="app">
    <waterfall-list :data-source="imageList"/>
  </div>
</template>

<script>

import WaterfallList from "./components/waterfall-list";

const suijicolour = ['#b4ffe3', '#66CDAA', '#acc2e6', '#d7b0d8', '#95abe6', '#ffc47b', '#b6d288', '#f49586', '#bcaf7a']

export default {
  name: 'App',
  components: {WaterfallList},
  data() {
    return {
      imageList: []
    }
  },
  mounted() {
    let array = new Array(10).fill(0)
    this.imageList = array.map((item) => {
      let index = Math.floor(Math.random() * 9)
      let height = Math.random() * 9
      let width = Math.random() * 9
      return {
        color: suijicolour[index],
        height: height,
        width: width
      }
    })
  }
}
</script>

<style>
html, body, #app {
  height: 100%;
  width: 100%;
  overflow: auto;
  padding: 0;
  margin: 0;
}
</style>
